<template>
  <div class="table">
    <p>流水列表</p>
    <el-table
      ref="multipleTable"
      :data="arr"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="70"> </el-table-column>

      <el-table-column prop="id" label="订单编号" width="220">
      </el-table-column>



      <el-table-column prop="fenlei" label="订单分类" width="180">
      </el-table-column>
      <el-table-column prop="name" label="标题" width="180"> </el-table-column>
      <el-table-column prop="money" label="订单金额" width="180">
        <template slot-scope="scope"
          ><span>￥ {{ scope.row.money }}</span></template
        >
      </el-table-column>
      <el-table-column prop="zhtai" label="订单状态" width="180">
        <template slot-scope="scope">{{ zhtaiObj[scope.row.zhtai] }}</template>
      </el-table-column>
      <el-table-column label="下单时间">
        <template slot-scope="scope">{{ scope.row.date }}</template>
      </el-table-column>
    </el-table>
    <div class="dele">
    <input type="checkbox" class="check" name="" id="" @click="fu">
    <el-button type="text" class="bold" >全选</el-button>
    <el-button type="text" class="nobold" @click="batchDeleteTable">批量删除</el-button>
  </div></div>
</template>

<script>
import { batchDelete } from '../../../api/account/account'
export default {
  props:['arr'],
  data() {
    return {
      zhtaiObj:{
   0:'待支付',
   1:'已支付'
      },
      // tableData: [
      //   {
      //     id: "2019030102369669",
      //     fenlei: "课程订单",
      //     date: "2016-05-03 00:00:00",
      //     name: "幼儿英语课程",
      //     zhtai: "待支付",
      //     money: "2499",
      //   },
      // ],
      multipleSelection: [],
    };
  },
  methods: {
    fu(e) {
      if (e.target.checked) {
          this.$refs.multipleTable.toggleAllSelection();
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    batchDeleteTable(){
      let ids = ''
      if(this.multipleSelection.length>0){
        this.multipleSelection.forEach(item=>{
          ids += item.id+','
        })
        ids = ids.slice(0,ids.length-1)
      }
       batchDelete({ids:ids}).then(res=>{
         console.log(res);
         if(res.code == 200){
            this.$emit('resetparentFun')
         }
       })
    }
  },
  watch:{
    multipleSelection(){
    if(this.multipleSelection.length==this.arr.length){
      document.querySelector(".check").checked=true
    }else{
      document.querySelector(".check").checked=false
    }
    }
  }
};
</script>
q
<style lang="less" scoped>
.table {
  background-color: #fff;
  
 
  position: relative;
 
    
  
 /deep/p{
  height: 52px;
  line-height: 52px;
  padding: 0 30px;
  font-size: 16px;
  font-weight: bold;
  }
}
/deep/.has-gutter {
  height: 32px;
  line-height: 32px;
  .el-table-column--selection {
    .cell {
      display: none;
    }
  }
  .el-table__cell {
    background-color: rgb(233, 228, 228);
    font-size: 16px;
    color: #333;
    font-weight: bold;
  }
}
/deep/.el-checkbox {
  margin-left: 40px;
}
/deep/.cell {
  text-align: center;
}
.quanxuan {
  margin: 0 10px 0 54px;
}
.bold {
  font-weight: bold;
  color: #333;
  font-size: 14px;
}
.nobold {
  color: #333;
}
.dele{
  position: absolute;
  left: 51px;
  bottom: -34px;
  .check{
    width: 16px;
    height: 14px;
    vertical-align: middle;
  }
  /deep/.el-button{
    span{ vertical-align: middle;
  }}
   
}
</style>